<template>
  <div class="edit-popup">
    <div class="my-channel channel">
      <van-cell :border='false' title="我的频道"  >
       <template>
         <van-button color="red" center  plain round size="mini" @click="isEdit = !isEdit">{{isEdit ? '完成' :'编辑'}}</van-button>
       </template>
      </van-cell>
      <van-grid :gutter="10">
        <van-grid-item  :class="{active:index===activeIndex}" :icon="(isEdit&&item.name!=='推荐') ? 'close' : ''" v-for="(item,index) in myChannel" :key="item.id" :text="item.name" @click="delMychannelFn(index,item.id)"/>
      </van-grid>
    </div>
     <div class="recommend-channel channel">
      <van-cell :border='false' title="推荐频道"  >
      </van-cell>
      <van-grid :gutter="10" direction='horizontal' icon-size='0.32rem'>
        <van-grid-item @click="pushMychannelFn(item)" v-for="item in recommendChannels" icon='plus'  :key="item.id" :text="item.name" />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannels, addUserChannel, deleteUserChannel } from '@/api/channel.js'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage.js'
import { Toast } from 'vant'
export default {
  created () {
    // 组件创建时 请求所有的频道数据
    this.getAllChannelsFn()
  },
  data () {
    return {
      allChannels: [],
      isEdit: false // 控制编辑状态
    }
  },
  props: {
    myChannel: {
      type: Array,
      required: true
    },
    // 父组件传过来的高亮索引
    activeIndex: {
      type: Number,
      required: true
    }
  },
  methods: {
    // 请求所有频道的方法
    async getAllChannelsFn () {
      const { channels } = await getAllChannels()
      this.allChannels = channels
    },
    // 点击推荐频道新增我的频道
    async pushMychannelFn (item) {
      this.myChannel.push(item)
      if (this.user) {
        try {
          await addUserChannel({ id: item.id, seq: this.myChannel.length })
          Toast('添加成功')
        } catch (err) {
          Toast('添加失败')
        }
      } else {
        console.log('存本地')
        setItem('TOUTIAO_CHANNELS', this.myChannel)
      }
    },
    // 删除我的频道
    delMychannelFn (i, id) {
      if (this.isEdit) {
        if (i === 0) return // 如果点击第一项推荐  直接return
        if (i <= this.activeIndex) { // 如果点击的是高亮之前的项 触发组件标签上的自定义事件 让高亮索引－1
          this.$emit('toggleChannel', this.activeIndex - 1, true)
        }
        this.myChannel.splice(i, 1)
        this.deleteMychannelFn(id) // 删除保存到本地
      } else {
        this.$emit('toggleChannel', i, false)
      }
    },
    // 删除我的频道
    async deleteMychannelFn (id) {
      if (this.user) {
        try {
          await deleteUserChannel(id)
          Toast.success('删除成功')
        } catch (error) {
          Toast.success('删除失败')
        }
      } else {
        setItem('TOUTIAO_CHANNELS', this.myChannel)
      }
    }
  },
  computed: {
    // 通过所有频道筛选出需要数据
    recommendChannels () {
      // 遍历allChannels和myChannel中的数组项  是否都包含id 是则移除 否则添加
      return this.allChannels.filter(channelitem => {
        return !this.myChannel.some(mychannel => channelitem.id === mychannel.id)
      })
    },
    ...mapState(['user'])
  }
}
</script>

<style scoped lang='less'>
.edit-popup {
  padding-top: 90px;
  .my-channel {
    .van-button {
      width: 100px;
      height: 50px
    }
    /deep/.van-icon-close {
      position: absolute;
      right: -10px;
      top: -10px;
      font-size: 32px;
    }
    /deep/.active {
      .van-grid-item__text {
        color: red !important;;
      }
    }
  }
  .channel {
     /deep/ .van-grid {
      .van-grid-item__content {
        width: 160px;
        height: 86px;
        line-height: 86px;
        background-color: #f5f5f6;
         .van-grid-item__text {
            color: #222;
            font-size: 24px;
            margin: 0;
          }
      }
      .van-grid-item__content::after{
        border:none
      }
    }
  }
}
</style>
